<template>
   <el-tree :data="departmentList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
import depart from '@/api/system/dempartmentAPI'
export default {
  props: {
    refreshDept: {type: Boolean, default: false}
  },
  watch: {
    refreshDept: {
      handler (val) {
        if (val) {
          this.getDepartmentList({deep: true})
        }
      },
      immediate: true
    }

  },
  components: {},
  data () {
    return {
      defaultProps: {
        children: 'childrenList',
        label: 'departmentName'
      },
      departmentList: []
    }
  },
  created () {
    this.getDepartmentList({deep: true})
  },
  methods: {
    handleNodeClick (data) {
      this.$emit('clickNode', data)
    },
    getDepartmentList (params) {
      this.$emit('update:refreshDept', false)
      depart.getDepartmentListAPI(params).then(res => {
        this.departmentList = res.data || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree{
    position: relative;
    cursor: default;
    background: #fff;
    color: #606266;
}
</style>
